<template>
  <!-- 腾信地图组件  -->
  <div>
    <iframe
      id="geoPage"
      width="0"
      height="0"
      frameborder="0"
      style="display: none"
      scrolling="no"
      src="https://apis.map.qq.com/tools/geolocation?key=PF3BZ-NSVKJ-3Z6FL-XJEAH-LIFB3-FZBQY&referer=test"
    >
    </iframe>
  </div>
  <div id="t_map" ref="mapRef"></div>
</template>

<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
import markerIcon from '@/assets/images/dingWei_xtp.png'
const props = defineProps({
  markers: {
    type: Array,
  },
})
let map, markerLayer, label
const mapRef = ref()
const TMap = window.TMap
const qq = window.qq
const geolocation = new qq.maps.Geolocation('a1GYccwE6hgSHi3trKKmQFALrOhCygzQ', 'test')
const isMapInit = ref(false)

// 初始化点标记
function initMarker() {
  //创建并初始化MultiMarker
  markerLayer = new TMap.MultiMarker({
    map: map,
    styles: {
      // 点标记样式
      mymark: new TMap.MarkerStyle({
        width: 20, // 样式宽
        height: 30, // 样式高
        anchor: { x: 10, y: 30 }, // 描点位置
      }),
      marker: new TMap.MarkerStyle({
        width: 20,
        height: 25,
        anchor: { x: 16, y: 32 },
        src: markerIcon,
      }),
    },
  })
}

// 初始化标签
function initLabel() {
  //初始化label
  label = new TMap.MultiLabel({
    id: 'label',
    map: map,
    styles: {
      label: new TMap.LabelStyle({
        padding: '6px',
        color: '#000', //颜色属性
        borderColor: '#fff',
        borderRadius: '5px',
        backgroundColor: '#fff',
        size: 14, //文字大小属性
        offset: { x: 50, y: -45 }, //文字偏移属性单位为像素
        angle: 0, //文字旋转属性
        alignment: 'center', //文字水平对齐属性
        verticalAlignment: 'middle', //文字垂直对齐属性
      }),
    },
  })
}

let timer = null
const show = ref(false)
const loc = ref({})
/**腾讯地图初始化 */
function mapInit() {
  if (!map) {
    map = new TMap.Map('t_map', {
      rotation: 20, //设置地图旋转角度
      pitch: 0, //设置俯仰角度（0~45）
      zoom: 14, //设置地图缩放级别
    })
    initMarker()
    initLabel()
  }
  window.addEventListener('message', getLocation, false)
  //为防止定位组件在message事件监听前已经触发定位成功事件，在此处显示请求一次位置信息
  document.getElementById('geoPage').contentWindow.postMessage('getLocation', '*')

  //设置6s超时，防止定位组件长时间获取位置信息未响应
  timer = setTimeout(function () {
    if (!loc.value) {
      //主动与前端定位组件通信（可选），获取粗糙的IP定位结果
      document.getElementById('geoPage').contentWindow.postMessage('getLocation.robust', '*')
    }
  }, 6000)
}

function getLocation(event) {
  // 接收位置信息
  loc.value = event.data
  if (loc.value && loc.value.module == 'geolocation') {
    //首次定位成功，创建地图
    const { lat, lng } = loc.value
    // 接收位置信息
    loc.value = event.data
    if (loc.value && loc.value.module == 'geolocation') {
      //首次定位成功，创建地图
      const { lat, lng } = loc.value
      map.setCenter(new TMap.LatLng(lat, lng))
      markerLayer.add({
        id: 'mymark',
        styleId: 'mymark',
        position: new TMap.LatLng(lat, lng),
        properties: {
          title: 'marker',
        },
      })
      emit('transmit', { lat, lng })
    }
  }
}

function addMarkers() {
  props.markers.map((i, index) => {
    const lat = i.lat
    const lng = i.lng
    markerLayer.add({
      styleId: 'marker',
      position: new TMap.LatLng(lat, lng),
      properties: {
        title: 'marker',
      },
    })
    label.add({
      id: 'label' + index,
      styleId: 'label',
      position: new TMap.LatLng(lat, lng),
      content: i.machineName,
    })
  })
}

watch(
  () => props.markers,
  () => {
    addMarkers()
  },
  {
    deep: true,
  },
)

const emit = defineEmits(['transmit'])
defineExpose({ mapInit })

onBeforeUnmount(() => {
  window.removeEventListener('message', () => {})
  clearTimeout(timer)
})
</script>

<style lang="scss">
#t_map {
  width: 100%;
  height: 200px;
}
</style>
